<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      img {
        width: 100%;
        vertical-align: middle;
      }
      .box {
        width: 500px;
        margin: 100px auto 0;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      .tab-navs {
        display: flex;
        background-color: rgb(42, 180, 0);
      }
      .tab-nav {
        padding: 6px 12px;
        border-right: 1px solid #ccc;
        cursor: pointer;
        color: #fff;
        text-shadow: 0 0 4px #fff;
      }
      .tab-nav.active {
        border-bottom: 2px solid #fd8c0b;
        text-shadow: 0 0 4px #fd8c0b;
        color: #fd8c0b;
        background-color: #fff;
      }
      .tab-items {
        width: 500%;
        display: flex;
        transition: transform 400ms;
      }
      .tab-items .tab-item {
        width: 20%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="tab-navs">
        <li class="tab-nav active">熊猫</li>
        <li class="tab-nav">哇噻</li>
        <li class="tab-nav">yeah</li>
        <li class="tab-nav">还行</li>
        <li class="tab-nav">程序媛</li>
      </ul>
      <ul class="tab-items">
        <li class="tab-item current"><img src="./images/01-01.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-02.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-03.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-04.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-05.jpg" alt="" /></li>
      </ul>
    </div>
    <script>
      var navs = Array.from(document.querySelectorAll('.tab-nav'))
      var slides = document.querySelector('.tab-items')
      var box = document.querySelector('.box')
      var current = 0
      var timer = setInterval(function(){
        if(current === navs.length - 1){
          current = -1
        }
        current++
        var target = current * 20 * -1
        slides.style.transform = `translateX(${target}%)`
        navs.forEach(function(el,index){
          index === current ? el.classList.add('active') : el.classList.remove('active')
        })
      },1000)
    </script>
  </body>
</html>
